<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" size="35" color="#000000" @click="$p.back()" name="arrow-left"></u-icon>
					<!-- tab部分 -->
					<view class="tab">
						<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
							@click="tabchange(item.id)">{{item.name}}</view>
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<view class="outside">
				<view class="list" v-if="stat == 1">
					<view class="item" v-for="(item,index) in datalsit1" :key="index">
						<p>本人【{{item.u_invite}}】转赠给好友 <text>【{{item.from_invite}}】</text> {{item.game_level}}绿水晶</p>
						<text class="security">本次担保人：{{item.trader?item.trader:'无'}}</text>
						<view>
							<view class="statues">赠送状态： <text
									:class="[item.status == 0?'':'color2']">{{item.status == 0?'待处理':item.status == 1?'已完成':'原路返还'}}</text>
							</view>
							<text>总扣除：{{item.number}}绿水晶</text>
						</view>
					</view>
					<view class="empty" v-if="datalsit1 == ''">
						<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
						<text>数据为空</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>

				<!-- 担保订单 -->
				<view class="" v-if="stat == 2">
					<view class="tab2">
						<view v-for="item in tablist2" :key="item.id" :class="[stat2 == item.id?'active2':'']"
							@click="tabchange2(item.id)">{{item.name}}</view>
					</view>

					<!-- 未完成订单 -->
					<view class="list" v-show="stat2 == 1">
						<view class="item2" v-for="(item , index) in datalist[1]" :key="index"
							@click="exchangeupdown(index , 1)">
							<p class="title">本人<text>【{{item.u_invite}}】</text>转赠给好友 <text>【{{item.from_invite}}】</text>
								{{item.number}}绿水晶</p>
							<view v-show="item.iszhan">
								<p class="security">实际到账：{{item.number}}绿水晶</p>
								<p class="security">本次担保人：{{item.trader}}</p>
								<p class="security">赠送状态：<text>待处理</text></p>
								<view class="btnbox">
									<view class="button" @click.stop="road(item.id)">原路返还</view>
									<view class="button" @click.stop="complete(item.id)">交易完成</view>
								</view>
								<view class="tips">
									<text>温馨提示</text>
									<text @click.stop="seeali(item)">点击查看双方资料</text>
								</view>
								<p class="bot">卖家没付款等问题请把绿水晶原路返还给卖家，</p>
							</view>
							<image class="posaimg"
								:src=" item.iszhan?'http://img.qxgm.site/sjcs/static/public/gup.png':'http://img.qxgm.site/sjcs/static/public/gdown.png' "
								mode="widthFix" />
						</view>
						<view class="empty" v-if="datalist[1] == ''">
							<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
						<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>

					<!-- 已完成订单 -->
					<view class="list" v-show="stat2 == 2">
						<view class="item2" v-for="(item , index) in datalist[2]" :key="index"
							@click="exchangeupdown(index , 2)">
							<p class="title">本人<text>【{{item.u_invite}}】</text>转赠给好友 <text>【{{item.from_invite}}】</text>
								{{item.number}}绿水晶</p>
							<view v-show="item.iszhan">
								<p class="security">实际到账：{{item.number}}绿水晶</p>
								<p class="security">本次担保人：{{item.trader}}</p>
								<p class="security">赠送状态：<text>已完成</text></p>
								<!-- <view class="btnbox">
								<view class="button">原路返还</view>
								<view class="button">交易完成</view>
							</view> -->
								<view class="tips">
									<text>温馨提示</text>
								</view>
								<p class="bot">卖家没付款等问题请把绿水晶原路返还给卖家，</p>
							</view>
							<image class="posaimg"
								:src=" item.iszhan?'http://img.qxgm.site/sjcs/static/public/gup.png':'http://img.qxgm.site/sjcs/static/public/gdown.png' "
								mode="widthFix" />
						</view>
						<view class="empty" v-if="datalist[2] == ''">
							<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
						<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>

					<!-- 已完成订单 -->
					<view class="list" v-show="stat2 == 3">
						<view class="item2" v-for="(item , index) in datalist[3]" :key="index"
							@click="exchangeupdown(index , 3)">
							<p class="title">本人<text>【{{item.u_invite}}】</text>转赠给好友 <text>【{{item.from_invite}}】</text>
								{{item.number}}绿水晶</p>
							<view v-show="item.iszhan">
								<p class="security">实际到账：{{item.number}}绿水晶</p>
								<p class="security">本次担保人：{{item.trader}}</p>
								<p class="security">赠送状态：<text>已返还</text></p>
								<!-- <view class="btnbox">
								<view class="button">原路返还</view>
								<view class="button">交易完成</view>
							</view> -->
								<view class="tips">
									<text>温馨提示</text>
								</view>
								<p class="bot">卖家没付款等问题请把绿水晶原路返还给卖家，</p>
							</view>
							<image class="posaimg"
								:src=" item.iszhan?'http://img.qxgm.site/sjcs/static/public/gup.png':'http://img.qxgm.site/sjcs/static/public/gdown.png' "
								mode="widthFix" />
						</view>
						<view class="empty" v-if="datalist[3] == ''">
							<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
						<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>
				</view>
			</view>
		</view>

		
		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<u-icon class="close" @click="show = false" name="close" color="#fff" size="28"></u-icon>
					<view class="title">原路返还</view>
					<view class="content">
						请确认订单是否存在争议，并且 <br> 原路返还
					</view>
					<view class="maskbtn">
						<view class="button quit" @click="show = false">取消</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button confirm" @click="orderreject()">确定</u-button>
					</view>
				</view>
			</view>
		</u-mask>

		<u-mask :show="show2">
			<view class="warp">
				<view class="maskbox">
					<u-icon class="close" @click="show2 = false" name="close" color="#fff" size="28"></u-icon>
					<view class="title">订单完成</view>
					<view class="content">
						请确认订单是否不存在争议，并且 <br> 交易立即完成
					</view>
					<view class="maskbtn">
						<view class="button quit" @click="show2 = false">取消</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button confirm" @click="orderfinish()">确定</u-button>
					</view>
				</view>
			</view>
		</u-mask>


		<u-mask :show="show3">
			<view class="warp">
				<view class="maskbox">
					<u-icon class="close" @click="show3 = false" name="close" color="#fff" size="28"></u-icon>
					<view class="title">查看双方资料</view>
					<view class="m_item mart20">
						<view class="word">
							<text>赠送方:{{information.u_name?information.u_name:'暂无'}}</text>
							<text>支付宝账号：{{information.u_account?information.u_account:'暂无'}}</text>
						</view>
						<view class="button" @click="copy(information.u_account)">复制</view>
					</view>
					<view class="m_item">
						<view class="word">
							<text>被赠送方:{{information.from_name?information.from_name:'暂无'}}</text>
							<text>支付宝账号：{{information.from_account?information.from_account:'暂无'}}</text>
						</view>
						<view class="button" @click="copy(information.from_account)">复制</view>
					</view>
				</view>
			</view>
		</u-mask>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '我的订单',
						isrequest: true
					},
					{
						id: 2,
						name: '担保订单',
						isrequest: false
					}
				],
				stat: 1,
				background: {
					background: '#EACFB7'
				},
				tablist2: [{
						id: 1,
						name: '待处理',
						isrequest: true,
					},
					{
						id: 2,
						name: '已完成',
						isrequest: false,
					},
					{
						id: 3,
						name: '已驳回',
						isrequest: false,
					}
				],
				stat2: 1,
				show: false, //原路返回弹窗
				show2: false, //订单完成
				show3: false, //查看双方资料
				page1: 1,
				max_page1: 1,
				page: [1, 1, 1, 1],
				max_page: [1, 1, 1, 1],
				datalsit1: [],
				datalist: {
					1: [],
					2: [],
					3: [],
				},

				isupdown: false,
				completeid: '', //用来保存交易完成的id
				roadid: '', //用来保存返回交易完成的id
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				information: '',
			};
		},
		onLoad() {
			this.orderList()
		},
		onReachBottom() {
			if (this.stat == 1) {
				// 我的订单下拉加载
				if (this.page1 >= this.max_page1) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page1 = ++this.page1;
				this.orderList()
				setTimeout(() => {
					if (this.page1 > this.max_page1 || this.page1 == this.max_page1) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			} else {
				// 担保订单下拉加载
				if (this.page[this.stat2] >= this.max_page[this.stat2]) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page[this.stat2] = ++this.page[this.stat2];
				this.orderList2(this.page[this.stat2], this.stat2)
				setTimeout(() => {
					if (this.page[this.stat2] > this.max_page[this.stat2] || this.page[this.stat2] == this
						.max_page[this.stat2]) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			}
		},
		methods: {
			// 顶部tab
			tabchange(id) {
				this.stat = id
				if (!this.tablist[1].isrequest) {
					this.orderList2(this.page[this.stat2], this.stat2)
				}
				if (!this.tablist[0].isrequest) {
					this.orderList()
				}
			},
			// 状态区分
			tabchange2(id) {
				this.stat2 = id
				if (!this.tablist2[id - 1].isrequest) {
					this.orderList2(this.page[this.stat2], this.stat2)
				}
			},
			// 收起展开
			exchangeupdown(index, type) {
				this.datalist[type][index].iszhan = !this.datalist[type][index].iszhan
			},

			copy(text) {
				this.$p.copy(text)
			},

			// 订单列表  header,page,type(1 我的订单 2 担保订单)
			async orderList() {
				let res = await this.$http.index.orderList({
					page: this.page1,
					type: 1
				})
				if (res.code == 1) {
					this.max_page1 = res.page
					this.datalsit1 = [...this.datalsit1, ...res.data]
					if (this.page1 > this.max_page1 || this.page1 == this.max_page1) this.status = 'nomore';
					this.tablist[0].isrequest = true
				}
			},

			// 担保订单三个状态
			async orderList2(page, type) {
				this.tablist[1].isrequest = true
				this.tablist2[type - 1].isrequest = true
				let res = await this.$http.index.orderList({
					page: page,
					type: 2,
					status: type - 1
				})
				if (res.code == 1) {
					let twlist = res.data.map(item => {
						return {
							...item,
							iszhan: false
						}
					})
					this.max_page[type] = res.page
					this.datalist[type] = [...this.datalist[type], ...twlist]
					if (this.page[type] > this.max_page[type] || this.page[type] == this.max_page[type]) this.status =
						'nomore';
					console.log(this.datalist);
				}
			},


			// 担保订单刷新接口
			async orderList3(page, type) {
				// 重新获取状态
				this.datalist[2] = []
				this.datalist[3] = []
				this.tablist2[1].isrequest = false
				this.tablist2[2].isrequest = false
				// 重新获取我的订单状态
				this.page1 = 1
				this.datalsit1 = []
				this.tablist[0].isrequest = false
				let res = await this.$http.index.orderList({
					page: page,
					type: 2,
					status: type
				})
				if (res.code == 1) {
					let twlist = res.data.map(item => {
						return {
							...item,
							iszhan: false
						}
					})
					this.datalist[1] = twlist
				}
			},

			// 查看资料
			seeali(item) {
				this.information = item
				this.show3 = true
			},

			// 唤起弹窗
			complete(id) {
				this.completeid = id
				this.show2 = true
			},

			// 订单完成接口
			async orderfinish() {
				let res = await this.$http.index.orderfinish({
					order_id: this.completeid
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.show2 = false
					this.orderList3(1, 0)
				}
			},

			// 唤起交易驳回弹窗
			road(id) {
				this.roadid = id
				this.show = true
			},

			// 交易驳回
			async orderreject() {
				let res = await this.$http.index.orderreject({
					order_id: this.roadid
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.show = false
					this.orderList3(1, 0)
				}
			},

		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	min-height: 100vh;
}
	// tab导航
	.tab {
		width: 60%;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		box-shadow: inset 0px 0px 3px 0px rgba(255, 255, 255, 0.34);
		border-radius: 20px;
		overflow: hidden;
		margin: 0 auto;

		view {
			width: 50%;
			height: 36px;
			text-align: center;
			line-height: 36px;
			color: #343434;
			font-size: 13px;
			font-weight: 600;
		}
	}

	.active {
		color: #fff !important;
		background: #000000;
	}


	// tab导航
	.tab2 {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 10px;

		view {
			width: 33%;
			margin: 0 10px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			color: #696969;
			font-size: 13px;
			font-weight: 600;
			background: #FFF8F1;
			border-radius: 5px;
			border: 1px solid #FEE1C3;
		}
	}

	.active2 {
		color: #343434 !important;
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%) !important;
		border: 1px solid #FEE1C3 !important;
	}


	.main {
		padding: 10px;
		background: #FFFFFF;
		border-radius: 25px 25px 0px 0px;
		min-height: calc(100vh - 60px);
	}

	.outside {
		border-radius: 11px;
		padding: 10px;
	}

	.list {
		// padding: 10px;
	}

	.item {
		background: #FFF8F1;
		border-radius: 5px;
		padding: 10px;
		margin: 5px 0;
		p {
			display: flex;
			align-items: center;
			color: #343434;
			font-size: 13px;
			font-weight: 600;

			text {
				color: #239D4C;
			}
		}

		.security {
			color: #696969;
			font-size: 13px;
			margin: 5px 0;
		}

		view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 13px;

			.statues {
				color: #696969;
			}

			text:nth-child(2) {
				color: #239D4C;
			}
		}
	}

	.color2 {
		color: #9D3A23 !important;
	}

	.item2 {
		background: #FFF8F1;
		border-radius: 5px;
		padding: 10px;
		margin: 5px 0;
		position: relative;

		.title {
			color: #343434;
			font-size: 13px;

			text {
				color: #239D4C;
			}
		}

		.security {
			color: #696969;
			font-size: 13px;
			margin: 5px 0;

			text {
				color: #239D4C;
			}
		}

		.btnbox {
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 40%;
				height: 42px;
				background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
				border-radius: 5px;
				color: #000000;
				font-size: 14px;
			}
		}

		.tips {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text:nth-child(1) {
				color: #343434;
				font-size: 14px;
			}

			text:nth-child(2) {
				color: #6FE6FC;
				font-size: 12px;
				text-decoration: underline;
			}
		}

		.bot {
			color: #696969;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	.posaimg {
		position: absolute !important;
		top: 11px;
		right: 10px;
		width: 15px;
	}




// 弹窗

.maskbox {
	background: #212121;
	box-shadow: inset 0px 1px 6px 0px rgba(255,255,255,0.3), inset 0px -1px 5px 0px rgba(255,255,255,0.24);
	border-radius: 10px;
	padding: 15px;
	position: relative;

	.title {
		margin: 0 auto;
		width: fit-content;
		font-size: 16px;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 23px;
		background: linear-gradient(90deg, #8BECFF 0%, #F2ACFF 38%, #FDD258 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.close {
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.content {
		padding: 20px 10px;
		color: rgba(255,255,255,0.8);
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		line-height: 18px;
		margin-top: 15px;
	}

	.maskbtn {
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.button {
			width: 115px;
			height: 41px;
			font-weight: 600;
			font-size: 14px;
			margin: 0;
		}

		.quit {
			background: #434343;
			border-radius: 6px;
			color: #fff;
		}
		.confirm {
			background: linear-gradient(90deg, #8BECFF 0%, #F2ACFF 38%, #FDD258 100%);
			border-radius: 6px;
			color: #151515;
		}
	}
}

.m_item {
	background: rgba(255,255,255,0.06);
	border-radius: 6px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;

	.word {
		display: flex;
		flex-direction: column;
		text {
			color: #fff;
			font-size: 14px;
			font-weight: 600;
		}
		text:nth-child(2) {
			margin-top: 5px;
		}
	}
	.button {
		width: 78px;
		height: 31px;
		background: linear-gradient(90deg, #8BECFF 0%, #F2ACFF 38%, #FDD258 100%);
		border-radius: 6px;
		color: #151115;
		font-size: 14px;
		font-weight: 600;
	}
}

.mart20 {
	margin-top: 20px;
}

</style>